<template>
  <div class="info">
    <header>
            <van-icon name="arrow-left" size="20" @click="back"/>
            <span>个人信息</span>
    </header>
    <ul>
      <li @click="onChangeInfo('avatar')">
        <span>头像</span>
        <span>
          <img :src="userInfo.avatar" />
        </span>
      </li>
      <li @click="onChangeInfo('nickname')">
        <span>昵称</span>
        <span>{{userInfo.nickname}}</span>
      </li>
      <li class="mobile">
        <span>手机号</span>
        <span>{{userInfo.mobile}}</span>
      </li>
      <li @click="onChangeInfo('sex')">
        <span>性别</span>
        <span>{{userInfo.sex_name}}</span>
      </li>
      <li @click="onChangeInfo('birthday')">
        <span>出生日期</span>
        <span>{{userInfo.birthday}}</span>
      </li>
      <li @click="onChangeInfo('address')">
        <span>所在城市</span>
        <span>{{userInfo.province_name}}{{userInfo.city_name?"，"+userInfo.city_name:''}}{{userInfo.district_name?"，"+userInfo.district_name:''}}</span>
      </li>
      <li @click="onChangeInfo('subjects')">
        <span>学科</span>
        <span>{{userInfo.subjectNames}}</span>
      </li>
      <li v-for="(item, index) in attrs" v-if="item.id!=2" :key="index" @click="onChangeInfo('attrs', item)">
        <span>{{item.attr}}</span>
        <span>{{item.selectIdx == -1 ? '请选择' : item.value[item.selectIdx].text}}</span>
      </li>
    </ul>
    <van-popup v-model="showPopup" position="bottom">
      <ul v-if="changeTag == 'avatar'" class="popup">
        <li @click="appUploadImg(1)">
          拍照
          <input type="file" accept="image/*" capture="camera" @change="onChangeAvatar" />
        </li>
        <li @click="appUploadImg(2)">
          从手机相册选择
          <input type="file" accept="image/*" @change="onChangeAvatar" />
        </li>
        <li @click="showPopup = false">取消</li>
      </ul>
      <van-datetime-picker
        v-else-if="changeTag == 'birthday'"
        v-model="birthday.currentDate"
        type="date"
        :min-date="birthday.minDate"
        :max-date="birthday.maxDate"
        @cancel="onCancel"
        @confirm="onConfirmBirthday"
      />
      <van-area
        v-else-if="changeTag == 'address'"
        :area-list="areaList"
        :columns-num="3"
        @change="onChangeAddress"
        @cancel="onCancel"
        @confirm="onConfirmAddress"
        :value="userInfo.district_id + ''"
      />
      <van-picker
        v-if="changeTag == 'attrs'"
        :columns="attrsColums"
        :default-index="attrsSelectIdx"
        show-toolbar
        @cancel="onCancel"
        @confirm="onConfirmAttrs"
      />
    </van-popup>
  </div>
</template>

<script>
import { SexType } from "@/util/enums";
import { Icon,Popup,DatetimePicker,Picker,Toast,Area} from 'vant';
import {userInfo,Image,news,attrs,city} from "../request/api.js"
let moment = require("moment");
import axios from "axios"
export default {
  components:{
        [Icon.name]: Icon,
        [Popup.name]: Popup,
        [DatetimePicker.name]:DatetimePicker,
        [Picker.name]:Picker,
        [Toast.name]:Toast,
        [Area.name]:Area,
    },
  name: "info",
  data() {
    return {
      userInfo: {},
      showPopup: false,
      changeTag: "",
      birthday: {
        minDate: new Date(1901, 1, 1),
        maxDate: new Date(),
        currentDate: new Date()
      },
      areaList: {
        province_list: {},
        city_list: {},
        county_list: {}
      },
      attrs: [],
      attrsColums: [],
      attrsSelectIdx: -1,
    };
  },
  created() {
    this.requestUserInfo();
    // let _this = this;
    // // 注册连接app的方法
    // this.$pub.registerWebViewJavascriptBridge(function(data) {
    //   _this.requestUpdateUserInfo({ avatar: JSON.parse(data)[0].path });
    // });
  },
  methods: {
    ove(){},
    
    // on event
    onChangeInfo(tag, item) {
      switch (tag) {
        case "nickname":
          this.$router.push({
            name: "SetInfo",
            query: {
              tag,
              value: this.userInfo.nickname
            }
          });
          return;
        case "sex":
          this.$router.push({
            name: "SetInfo",
            query: {
              tag,
              value: this.userInfo.sex
            }
          });
          return;
        case "address":
          this.requestArea();
          break;
        case "subjects":
          let val;
          this.attrs.forEach(res => {
            if(res.id==2){
              val = res.value
            }
          })
          this.$router.push({
            name: "SetInfo",
            query: {
              tag,
              value: val,
              select: this.userInfo.subjects
            }
          });
          return 
          break;
        case "attrs":   
          this.attrsColums = item.value;
          this.attrsSelectIdx = item.selectIdx;
          break;
      }
      this.changeTag = tag;
      this.showPopup = true;
    },
    back(){
            this.$router.go(-1);
        },
    appUploadImg(type) {
      if (this.$store.state.app) {
        this.$pub.appAction("selectPhoto", { photoType: type });
        this.showPopup = false;
      }
    },
   onChangeAvatar(e) {
      console.log(e.target.files[0]);
      const formdata = new FormData();
      formdata.append("file", e.target.files[0]); //在数据末尾追加数据append(key,value
      let config={
                headers:{'Content-Type':'multipart/form-data; boundary=----WebKitFormBoundaryugcS94w00auCAPgr',Authorization: 'Bearer '+localStorage.adminToken }
             }
             
      axios.post('https://test.365msmk.com/api/app/public/img',formdata,config).then((res)=>{
        console.log(res.data.data)
        this.requestUpdateUserInfo({ avatar: res.data.data.path });
        this.showPopup = false;
      })
    },
    onCancel() {
      this.showPopup = false;
    },
    onConfirmBirthday(val) {
      var time=moment(val).format("YYYY-MM-DD")
      this.showPopup = false;
      console.log(time)
      this.requestUpdateUserInfo({ birthday: time});
    },
    onChangeAddress(picker, data, index) {
      // console.log(picker, data, index);
      switch (index) {
        case 0:
          city(data[index].code).then(res => {
            let obj = {};
            res.data.forEach(i => {
              obj[i.id] = i.area_name;
            });
            this.areaList.city_list = obj;
            city(res.data[0].id).then(res1 => {
              obj = {};
              res1.data.forEach(i => {
                obj[i.id] = i.area_name;
              });
              this.areaList.county_list = obj;
            });
          });
          break;
        case 1:
          city(data[index].code).then(res => {
            let obj = {};
            res.data.forEach(i => {
              obj[i.id] = i.area_name;
            });
            this.areaList.county_list = obj;
          });
          break;
        case 2:
          break;
      }
    },
    onConfirmAddress(val) {
      this.showPopup = false;
      this.requestUpdateUserInfo({
        province_id: val[0].code,
        city_id: val[1].code,
        district_id: val[2].code
      });
    },
    onConfirmAttrs(value, index) {
      this.showPopup = false;
      this.attrs[value.parentIdx].selectIdx = index;
      const attrAry = [];
      this.attrs.forEach(i => {
        if (i.selectIdx == -1) return;
        attrAry.push({
          attr_id: i.id,
          attr_val_id: i.value[i.selectIdx].id
        });
      });
      this.requestUpdateUserInfo({
        user_attr: JSON.stringify(attrAry)
      });
    },
    // request
    requestUserInfo() {
     
      userInfo().then(data => {
        this.userInfo = data.data;
        console.log(this.userInfo)
        // 性别
        this.userInfo.sex_name = SexType.getValue(data.data.sex);
        // 生日
        if (this.userInfo.birthday == 0) {
          this.userInfo.birthday = "请选择";
        }
        // 城市
        if (!this.userInfo.province_name) {
          this.userInfo.province_name = "请选择";
        }
        //学科
        let subArr = []
        let subNames = ''
        data.data.attr.forEach(res=>{
          if(res.attr_id==2){
            subArr.push(res.attr_val_id)
            subNames = subNames + " " + res.attr_value
          }
        })
        this.userInfo.subjects = subArr
        this.userInfo.subjectNames = subNames

        // 动态属性
        this.attrs = [];
        attrs().then(attrData => {
          attrData.data.forEach(i => {
            if (i.value.length == 0) return;
            // 修改
            i.value.forEach(ci => {
              ci.text = ci.name;
              ci.parentIdx = this.attrs.length;
            });
            // 选中
            i.selectIdx = -1;
            for (const attri of this.userInfo.attr) {
              if (attri.attr_id == i.id) {
                for (let vali = 0; vali < i.value.length; ++vali) {
                  if (attri.attr_val_id == i.value[vali].id) {
                    i.selectIdx = vali;
                    break;
                  }
                }
                break;
              }
            }
            // 压入
            this.attrs.push(i);
          });
        });
        this.showPopup = false;
      });
    },
    requestUpdateUserInfo(params) {
      news(params).then(() => {
        this.$toast("数据更新成功");
        this.requestUserInfo();
      });
    },
    requestArea() {
      city(0).then(res => {
        // console.log(res.data);
        let obj = {};
        res.data.forEach(i => {
          obj[i.id] = i.area_name;
        });
        //省
        this.areaList.province_list = obj;
        const provinceID = this.userInfo.province_id || res[0].id;
        city(provinceID).then(res1 => {
          // console.log(res1);
          obj = {};
          res1.data.forEach(i => {
            obj[i.id] = i.area_name;
          });
          this.areaList.city_list = obj;
          const cityID = this.userInfo.city_id || res1[0].id;
          city(cityID).then(res2 => {
            // console.log(res2);
            obj = {};
            res2.data.forEach(i => {
              obj[i.id] = i.area_name;
            });
            this.areaList.county_list = obj;
            if (!this.userInfo.district_id && res2.length) {
              this.userInfo.district_id = res2[0].id;
            }
          });
        });
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.info {
  min-height: 100vh;
  background: #f0f2f5;
  box-sizing: border-box;
  header{
    width:100%;
    border-bottom:1px solid #f4f4f4;
    height:42px;
    display:flex;
    padding-top: 5px;
    background:white;
    .van-icon{
        flex:1;
         text-align:center;
    }
    span{
        flex:3;
        font-size:20px;
        padding-left: 80px;
    }
}
  ul {
    background: #fff;
    padding: 10px 30px;
    li {
      height: 55px;
      line-height: 55px;
      display: flex;
      justify-content: space-between;
      position: relative;
      span:nth-child(1) {
        font-size: 15px;
        color: #595959;
      }
      span:nth-child(2) {
        font-size: 15px;
        color: #8c8c8c;
        margin-right: 50px;
      }
      span > img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: middle;
      }
      &:before {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 20px;
        height: 20px;
        border-top: 1px solid #b7b7b7;
        border-right: 1px solid #b7b7b7;
      }
      &:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 1px;
        background-color: #f5f5f5;
      }
      &:last-child:after {
        display: none;
      }
    }
    .mobile:before {
      display: none;
    }
  }
  .popup {
    margin: 0;
    li {
      height: 30px;
      line-height: 30px;
      font-size: 15px;
      font-weight: 300;
      color: #030303;
      text-align: center;
      display: block;
      // position: relative;
      &:before {
        display: none;
      }
      input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
    }
  }
}
</style>